*{
  list-style: none;
  box-sizing: border-box;
  transition: background-color 0.3s;
}
ul{
  padding: 0;
}
video:focus{
  outline: none !important;
}
button{
  outline: none !important;
}
body{
  background: url('./assets/bg.jpeg');
}

#root {
  /* max-width: 1280px; */
  width: 100%;
  margin: 0 auto;
  text-align: center;
  height: 100%;
  overflow: hidden;
}

/* @media screen and (min-width:1000px) and (max-width:1800px) {
  #root {
    padding: 0 2rem;
  }
} */




/* 入场动画过程 */
.dg-enter{
  transform: translateX(200px)
}
.dg-enter-active{
  transition: 2s;
  transform: translateX(0px)
}
.dg-enter-done{
  transform: translateX(0px)
}
/* 出场动画过程 */
.dg-exit{
  transform: translateX(0px)
}
.dg-exit-active{
  transition: 2s;
  transform: translateX(200px)
}
.dg-exit-done{
  transform: translateX(200px)
}

.home, .user, .login, .animate{
  position: absolute;
  left: calc(50% - 200px)
}

/* 入场动画过程 */
.animate-enter{
  opacity: 0;
  transform: translateY(10px);
}
.animate-enter-active{
  transition: .5s;
  opacity: 1;
  transform: translateY(0px);
}
.animate-enter-done{
  opacity: 1;
  transform: translateY(0px);
}
/* 出场动画过程 */
.animate-exit{
  opacity: 1;
  transform: translateY(0px);
}
.animate-exit-active{
  transition: .5s;
  opacity: 0;
  transform: translateY(100px);
}
.animate-exit-done{
  opacity: 0;
  transform: translateY(100px);
}



